<template>
  <div class="mobile-container">
    <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        :finished-text="state.finished_text"
        @load="onLoad"
    >
      <van-cell v-for="item in state.list" :key="item.id" :title="item.title" >
        <van-button @click="gotoFormView(item.id)">对表单提交申请</van-button>
      </van-cell>
    </van-list>
  </div>
</template>

<script lang="ts">
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {Notify} from "vant";
import {reactive, ref} from "vue";

export default {
  name: "mobile_club_forms",
  setup() {
    const router = useRouter();
    const store = useStore();
    const query =reactive({
      page:0,
      size:10,
      page_info:null as any
    });
    const state = reactive({
      list: [] as any,
      loading: false,
      finished: false,
      finished_text:'没有更多的了'
    });
    const getPageInfo = function (){
      fetch("api/club/"
          + router.currentRoute.value.query.clubid +
          "/form?page=" + query.page +
          "&size=" + query.size).then(res=>{
        if(res.status == 200 ){
          return res.json();
        }else{
          console.log(
              res
          )
        }
      }).then(json=>{
        // console.log(json)
        json.items.forEach(
            (item: any)=>{
              state.list.push(item);
            }
        )
        query.page_info = json.page_info;
        if(query.page_info!=null&&query.page_info.has_next_page){
          query.page++;
          getPageInfo();
        }else{
          if(state.list.length==0){
            state.finished_text="社长并没有设置表单，请通知社长设置表单"
          }
          state.loading=false;
          state.finished=true;
        }
      })
    }
    const onLoad = () => {
      getPageInfo();
    };
    const gotoFormView =function (formid:number){
      router.push({
        path:"/form",
        query:{
          type:'public',
          formid:formid
        }
      })
    }
    return {
      router,
      state,
      onLoad,
      gotoFormView
    }
  }
}
</script>

<style scoped>
.mobile-container {
  padding-top: 30px;
  padding-bottom: 200px;
}
</style>